<template>
    <view class="title">项目进度</view>
    <tree-node  v-for="node in treeData" :key="node.projectPlanId" :node="node" />
</template>

<script setup>
  import {ref,onMounted} from 'vue';
  import {getProjectPlanList} from '@/apis/projectPlan.js'
  import {onShow} from '@dcloudio/uni-app'
  const flatData = ref([]);
  const treeData = ref([]);
  const projectId = uni.getStorageSync('projectInfo').id

  onShow(() => {
    getProjectPlanList(projectId).then(res => {
      console.log(res.data.data);
      flatData.value = res.data.data;
      treeData.value = buildTree(flatData.value); // 在数据更新后构建树状结构
    })
  })

  // 构建树状结构的函数
  const buildTree = (data) => {
    const map = {};
    const tree = [];
    data.forEach((item) => {
      map[item.projectPlanId] = {
        ...item,
        children: []
      };
    });
    data.forEach((item) => {
      if (item.parentId !== 0) {
        if (map[item.parentId]) {
          map[item.parentId].children.push(map[item.projectPlanId]);
        }
      } else {
        tree.push(map[item.projectPlanId]);
      }
    });

    return tree;
  }
</script>

<style scoped lang="scss">
    .title {
      margin: 15px;
      font-weight: bold;
      font-size: 17px;
    }
</style>